<template>
  <el-drawer
      :model-value="drawerVisible"
      :with-header="true"
      direction="ltr"
      size="40%"
      :show-close="false"
  >
    <template #header><p class="flex justify-center text-dark-800 text-xl font-bold">{{title}}</p></template>
    <el-form :model="upLinkInfo" label-width="auto" size="large" >
      <el-form-item v-for="(item, index) in optionInfo" :label="item.label" :key="index" label-position="top">
        <p v-if="item.prop === 'certificateTime'">{{formatFiscoBcosTimestamp(upLinkInfo[item.prop])}}</p>
        <el-image v-else-if="item.prop === 'certificateMaterial'" :src="upLinkInfo[item.prop]"/>
        <el-image v-else-if="item.prop === 'businessLicense'" :src="upLinkInfo[item.prop]"/>
        <el-image v-else-if="item.prop === 'cardX'" :src="upLinkInfo[item.prop]"/>
        <el-image v-else-if="item.prop === 'cardY'" :src="upLinkInfo[item.prop]"/>
        <el-image v-else-if="item.prop === 'qtpic'" :src="upLinkInfo[item.prop]"/>
        <el-input v-else v-model="upLinkInfo[item.prop]" :disabled="true" />
      </el-form-item>
      <el-form-item class="input-style" >
        <el-button
            style="margin-left: 120px;"
            class="min-w-xs"
            type="primary"
            size="large"
            v-show="isShow"
            @click="submit" round>
          提交存证信息<el-icon><Pointer /></el-icon>
        </el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<script setup>
import {defineProps} from "vue";

const props = defineProps({
  drawerVisible: {
    type: Boolean,
    default: false
  },
  upLinkInfo: {
    type: Object,
    default: {}
  },
  optionInfo: {
    type: Object,
    default: {}
  },
  title: {
    type: String,
    default: ''
  },
  isShow: {
    type: Boolean,
    default: false
  }
})
const emits = defineEmits(["handleUpLink"])
const submit = () => {
  emits("handleUpLink")
}
function formatDate(year, month, day, hours, minutes, seconds, timezoneOffset) {
  // 将时区偏移量转换为小时数和分钟数
  const timezoneOffsetHours = Math.floor(Math.abs(timezoneOffset) / 60);
  const timezoneOffsetMinutes = Math.abs(timezoneOffset) % 60;
  const timezoneOffsetSign = timezoneOffset < 0 ? '-' : '+';

  // 格式化日期字符串
  const dateString = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')} ${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}${timezoneOffsetSign}${timezoneOffsetHours.toString().padStart(2, '0')}${timezoneOffsetMinutes.toString().padStart(2, '0')}`;

  // 返回日期字符串，不包含时区信息
  return dateString.slice(0, -5);
}
function formatFiscoBcosTimestamp(timestamp) {
  // 将时间戳转换为 Date 对象
  const date = new Date(timestamp);
  // 使用 Date 对象的 getUTC* 方法获取年月日等信息
  const year = date.getUTCFullYear();
  const month = date.getUTCMonth() + 1; // 月份从 0 开始，需要加 1
  const day = date.getUTCDate();
  let hours = date.getUTCHours() + 8; // 将时区设置为东八区
  const minutes = date.getUTCMinutes();
  const seconds = date.getUTCSeconds();
  // 如果小时数大于等于 24，则将其减去 24 并将日期加一
  if (hours >= 24) {
    hours -= 24;
    date.setDate(date.getDate() + 1);
  }
  // 获取时区偏移量
  const timezoneOffset = date.getTimezoneOffset() * -1;
  // 格式化日期字符串
  const dateString = formatDate(year, month, day + 1, hours, minutes, seconds, timezoneOffset);
  // 返回日期字符串
  return dateString;
}
</script>

<style scoped>

</style>